import React from 'react'
import { Image, Picker, Text, View } from '@tarojs/components'
import dayjs, { Dayjs } from 'dayjs'
import { CommonEvent } from '@tarojs/components/types/common'
import Images from '@ASSET/Images'
import classnames from 'classnames'
import { isIOSWeb } from '@UTILS/common'
import style from './DatePicker.module.scss'
const iosWeb = isIOSWeb()

interface Props {
  start?: string
  maxDate?: string
  value?: string
  onSelectDate: (e: CommonEvent) => void
  showIcon?: boolean
  textClass?: string
  iconClass?: string
}

const FORMAT = 'YYYY年MM月'

const DatePicker: React.FC<Props> = ({ start, maxDate,
  value, onSelectDate, showIcon,
  textClass, iconClass }) => {
  const dayjsDate: Dayjs = dayjs(value)
  let maxDateValue: string = maxDate
    ? dayjs(maxDate).format('YYYY-MM')
    : ''
  let valueFormat = dayjsDate.format('YYYY-MM')
  if (iosWeb) {
    valueFormat = dayjsDate.format('YYYY/MM/DD')
    maxDateValue = dayjs(maxDate).format('YYYY/MM/DD')
  }

  return (
    <Picker
      mode="date"
      fields="month"
      start={start}
      end={maxDateValue}
      onChange={onSelectDate}
      value={valueFormat}
    >
      <View className={style.container}>
        <Text className={`${style.dateText} ${textClass}`}>
          {dayjsDate.format(FORMAT)}
        </Text>
        {showIcon && <View className={`${style.iconDate} ${iconClass}`} />}
      </View>
    </Picker>
  )
}

export default DatePicker
